<template>
  <header class="header">
    <div class="header_top">
      <div>
        <img src="../assets/img/logo.png" alt="">
        <span class="logo_title">小蜂修平台系统</span>
      </div>
      <div>
        <span class="userTitle">平台管理员</span>
        <router-link to="" class="userTitle"><i class="fa fa-user userIcons"></i></router-link>
        &emsp;
        <a href="" v-on:click="loginOut()" title="点击退出" class="userTitle"><i class="fa fa-power-off userIcons"></i></a>
      </div>
    </div>
    <div class="header_bottom">
      <ul class="parent_ul" v-on:mouseleave="parentSource = ''">
        <li class="parent_li" v-for="(menuParents,index) in menuTree" :key="index">
          <span class="parent_span" v-bind:class="{'parent-active':currentRouterName.indexOf(menuParents.source) != -1}"
                v-on:mousemove="parentSource = menuParents.source" v-text="menuParents.name"></span>
          <ul v-show="parentSource == menuParents.source" class="child_ul">
            <li v-for="(menuChild,index) in menuParents.menuList" :key="index"
                v-on:mousemove="parentSource = menuParents.source" class="child_li"
                v-bind:class="{'child-active':currentRouterName.indexOf(menuChild.source) != -1}"
                v-text="menuChild.name" v-on:click="slotGo(menuChild.source)">
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </header>
</template>

<script>
  export default {
    name: 'header',
    data () {
      return {
        parentSource: '',
        currentRouterName: this.$route.name,
//        msg: 'Welcome to Your Vue.js App',
//        menuTree: [
//          {
//            "id": "31",
//            "createTime": 1494214311647,
//            "createBy": null,
//            "invalidTime": null,
//            "updateTime": null,
//            "updateBy": null,
//            "delFlg": "0",
//            "delTime": null,
//            "name": "工单管理",
//            "source": "workOrder",
//            "code": null,
//            "pid": null,
//            "type": null,
//            "ownerId": null,
//            "orgId": null,
//            "sort": 0,
//            "menuList": [
//              {
//                "id": "32",
//                "createTime": 1494214311649,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "工单中心",
//                "source": "workOrderList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              },
//              {
//                "id": "33",
//                "createTime": 1494214311649,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "报修受理",
//                "source": "workOrderAccept",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              }
//            ]
//          },
//          {
//            "id": "34",
//            "createTime": 1494214311647,
//            "createBy": null,
//            "invalidTime": null,
//            "updateTime": null,
//            "updateBy": null,
//            "delFlg": "0",
//            "delTime": null,
//            "name": "零件管理",
//            "source": "spareParts",
//            "code": null,
//            "pid": null,
//            "type": null,
//            "ownerId": null,
//            "orgId": null,
//            "sort": 0,
//            "menuList": [
//              {
//                "id": "35",
//                "createTime": 1494214311651,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "零件列表",
//                "source": "sparePartsList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              },
//              {
//                "id": "36",
//                "createTime": 1494214311651,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "零件类型",
//                "source": "sparePartsSortList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              },
//              {
//                "id": "37",
//                "createTime": 1494214311651,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "零件品牌价格",
//                "source": "sparePartsPriceList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              }
//            ]
//          },
//          {
//            "id": "38",
//            "createTime": 1494214311647,
//            "createBy": null,
//            "invalidTime": null,
//            "updateTime": null,
//            "updateBy": null,
//            "delFlg": "0",
//            "delTime": null,
//            "name": "设备管理",
//            "source": "equipment",
//            "code": null,
//            "pid": null,
//            "type": null,
//            "ownerId": null,
//            "orgId": null,
//            "sort": 0,
//            "menuList": [
//              {
//                "id": "39",
//                "createTime": 1494214311653,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "设备列表",
//                "source": "equipmentList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              },
//              {
//                "id": "40",
//                "createTime": 1494214311653,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "设备类型",
//                "source": "equipmentSortList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              },
//              {
//                "id": "105",
//                "createTime": 1494214311653,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "品牌管理",
//                "source": "equipmentBrandList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              },
//              {
//                "id": "41",
//                "createTime": 1494214311653,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "设备故障信息",
//                "source": "equipmentFaultList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              },
//              {
//                "id": "42",
//                "createTime": 1494214311653,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "设备明细",
//                "source": "equipmentParticularList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              }
//            ]
//          },
//          {
//            "id": "44",
//            "createTime": 1494214311647,
//            "createBy": null,
//            "invalidTime": null,
//            "updateTime": null,
//            "updateBy": null,
//            "delFlg": "0",
//            "delTime": null,
//            "name": "系统管理",
//            "source": "system",
//            "code": null,
//            "pid": null,
//            "type": null,
//            "ownerId": null,
//            "orgId": null,
//            "sort": 0,
//            "menuList": [
//              {
//                "id": "45",
//                "createTime": 1494214311656,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "权限管理",
//                "source": "systemPermissions",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              },
//              {
//                "id": "46",
//                "createTime": 1494214311656,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "角色管理",
//                "source": "systemRoleList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              },
//              {
//                "id": "47",
//                "createTime": 1494214311656,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "用户管理",
//                "source": "systemManagerList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              },
//              {
//                "id": "48",
//                "createTime": 1494214311656,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "服务商管理",
//                "source": "systemProviderList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              },
//              {
//                "id": "49",
//                "createTime": 1494214311656,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "客户管理",
//                "source": "systemCustomerList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              },
//              {
//                "id": "50",
//                "createTime": 1494214311656,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "门店管理",
//                "source": "systemStoreList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              }
//            ]
//          },
//          {
//            "id": "51",
//            "createTime": 1494214311647,
//            "createBy": null,
//            "invalidTime": null,
//            "updateTime": null,
//            "updateBy": null,
//            "delFlg": "0",
//            "delTime": null,
//            "name": "费用管理",
//            "source": "cost",
//            "code": null,
//            "pid": null,
//            "type": null,
//            "ownerId": null,
//            "orgId": null,
//            "sort": 0,
//            "menuList": [
//              {
//                "id": "52",
//                "createTime": 1494214311658,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "费用规则",
//                "source": "costRule",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              }
//            ]
//          },
//          {
//            "id": "53",
//            "createTime": 1494214311647,
//            "createBy": null,
//            "invalidTime": null,
//            "updateTime": null,
//            "updateBy": null,
//            "delFlg": "0",
//            "delTime": null,
//            "name": "节假日维护",
//            "source": "holiday",
//            "code": null,
//            "pid": null,
//            "type": null,
//            "ownerId": null,
//            "orgId": null,
//            "sort": 0,
//            "menuList": [
//              {
//                "id": "54",
//                "createTime": 1494214311660,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "节假日维护",
//                "source": "holidayList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              }
//            ]
//          },
//          {
//            "id": "55",
//            "createTime": 1494214311647,
//            "createBy": null,
//            "invalidTime": null,
//            "updateTime": null,
//            "updateBy": null,
//            "delFlg": "0",
//            "delTime": null,
//            "name": "SLA管理",
//            "source": "sla",
//            "code": null,
//            "pid": null,
//            "type": null,
//            "ownerId": null,
//            "orgId": null,
//            "sort": 0,
//            "menuList": [
//              {
//                "id": "56",
//                "createTime": 1494214311662,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "SLA列表",
//                "source": "slaList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              }
//            ]
//          },
//          {
//            "id": "57",
//            "createTime": 1494214311647,
//            "createBy": null,
//            "invalidTime": null,
//            "updateTime": null,
//            "updateBy": null,
//            "delFlg": "0",
//            "delTime": null,
//            "name": "合同管理",
//            "source": "contract",
//            "code": null,
//            "pid": null,
//            "type": null,
//            "ownerId": null,
//            "orgId": null,
//            "sort": 0,
//            "menuList": [
//              {
//                "id": "58",
//                "createTime": 1494214311664,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "合同列表",
//                "source": "contractList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              }
//            ]
//          },
//          {
//            "id": "59",
//            "createTime": 1494214311647,
//            "createBy": null,
//            "invalidTime": null,
//            "updateTime": null,
//            "updateBy": null,
//            "delFlg": "0",
//            "delTime": null,
//            "name": "业务报表",
//            "source": "businessReport",
//            "code": null,
//            "pid": null,
//            "type": null,
//            "ownerId": null,
//            "orgId": null,
//            "sort": 0,
//            "menuList": [
//              {
//                "id": "60",
//                "createTime": 1494214311666,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "零件报表",
//                "source": "businessReportSpareList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              },
//              {
//                "id": "61",
//                "createTime": 1494214311666,
//                "createBy": null,
//                "invalidTime": null,
//                "updateTime": null,
//                "updateBy": null,
//                "delFlg": "0",
//                "delTime": null,
//                "name": "工单报表",
//                "source": "businessReportWorkList",
//                "code": null,
//                "pid": null,
//                "type": null,
//                "ownerId": null,
//                "orgId": null,
//                "sort": 0,
//                "menuList": null
//              }
//            ]
//          }
//        ],
        menuTree:this.store.loginInfo.menuTree
      }
    },
    watch: {
      '$route': 'watchRouter'
    },
    methods: {
      slotGo(routerName){
        this.$router.push({name: routerName})
      },
      watchRouter(){
        this.currentRouterName = this.$route.name;
//        console.log(this.currentRouterName)
      },
      loginOut(){
          this.$axios({
            url:'/webloginout',
          }).then(function (res) {
            this.$router.push({name:'login'})
          })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  @import "../assets/commn/commn";

  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10200;
  }

  .header_top {
    height: 50px;
    background-color: #f7f7f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    img {
      width: 40px;
      height: 40px;
    }
    .logo_title {
      margin-left: 10px;
      font-size: 18px;
      height: 40px;
      line-height: 40px;
    }
    .userTitle {
      color: $hrefColor;
    }
    .userIcons {
      font-size: 18px;
    }
  }

  .header_bottom {
    height: 40px;
    background-color: #5d5d5d;
    text-align: left;
    .parent_ul {
      .parent_li {
        float: left;
        color: #ffffff;
      }
      .parent_span {
        padding: 12px 20px;
        height: 40px;
        line-height: 40px;
      }
      .parent-active {
        box-shadow: 0 2px 10px #eee;
        font-weight: 600;
        background-color: #f57e00;
        cursor: pointer;
      }
    }
    .child_ul {
      box-shadow: 0 2px 10px #eee;
      background-color: #eee;
      position: absolute;
      .child_li {
        color: $hrefColor;
        padding: 10px 20px;
        margin-top: 1px;
        &:hover {
          background-color: #f57e00;
          cursor: pointer;
          color:#ffffff;
          font-weight: 600;
        }
      }
      .child-active {
        font-weight: 600;
        color: #ffffff;
        background-color: #f57e00;
      }
    }
  }

  ul {
    padding: 0;
    margin: 0;
  }

  li {
    list-style: none;
    &:hover {
      background-color: #f57e00;
      cursor: pointer;
    }
  }
</style>
